<script setup lang="ts">
import {useSettingStore} from "@/store/modle/setting";
import {onBeforeMount, onMounted, ref} from "vue";

const settingStore = useSettingStore()
const btcChange = (item: any) => {
  //浅拷贝
  settingForm.value.btc.selectValue = {...item}
}
const settingForm = ref()
onBeforeMount(() => {
  //克隆
  settingForm.value = JSON.parse(JSON.stringify(settingStore.setting))
})
const save = () => {
  settingStore.setting=settingForm.value
}

const reset = () => {
  settingStore.reset()
  settingForm.value = JSON.parse(JSON.stringify(settingStore.setting))
}
const emit = defineEmits(['exit'])
</script>
<template>
  <div class="isolate relative bg-white py-24 px-6 sm:py-6 lg:px-8 dark:bg-jacarta-800 dark:text-jacarta-400">
    <div class=" max-w-2xl">
      <h2 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-xl">系统配置</h2>
    </div>
    <div class=" mt-2 max-w-xl sm:mt-2">
      <div class="grid grid-cols-1 gap-y-6 gap-x-8 md:grid-cols-2 sm:grid-cols-2">
        <div class="flex gap-x-4 sm:col-span-2">
          <label for="first-name" class="block text-sm font-semibold leading-6 text-gray-900">自动切换主题</label>
          <div class="flex h-6 items-center">
            <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
            <button type="button"
                    @click="settingForm.autoDarkMode = !settingForm.autoDarkMode"
                    class=" flex w-16 flex-none cursor-pointer rounded-full p-px ring-1 ring-inset ring-gray-900/5 transition-colors duration-200 ease-in-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                    role="switch" aria-checked="false" aria-labelledby="switch-1-label"
                    :class="{'bg-accent-dark':settingForm.autoDarkMode, 'bg-gray-200': !settingForm.autoDarkMode}">
              <span class="sr-only">Agree to policies</span>
              <!-- Enabled: "translate-x-3.5", Not Enabled: "translate-x-0" -->
              <span aria-hidden="true"
                    :class="{'translate-x-10':settingForm.autoDarkMode, 'translate-x-0': !settingForm.autoDarkMode}"
                    class=" h-6 w-6 transform rounded-full bg-white shadow-sm ring-1 ring-gray-900/5 transition duration-200 ease-in-out"></span>
            </button>
          </div>
        </div>
        <div class="sm:col-span-2">
          <label for="message" class="block text-sm font-semibold leading-6 text-gray-900">主题</label>
          <div class="mt-2.5 space-x-4">
            <button class="px-4 py-1 border rounded-md border-accent" @click="settingForm.darkMode=true"
                    :class="{'bg-accent-dark text-white':settingForm.darkMode}">黑夜模式
            </button>
            <button class="px-4 py-1 border rounded-md border-accent" @click="settingForm.darkMode=false"
                    :class="{'bg-accent-dark text-white':!settingForm.darkMode}">白天模式
            </button>
          </div>
        </div>
        <div class="sm:col-span-2 lg:col-span-1">
          <label for="message" class="block text-sm font-semibold leading-6 text-gray-900">货币模式</label>
          <div class="mt-2.5">
            <select v-model="settingForm.btc.selectValue"
                    class="form-select px-10 py-1 rounded-md border-accent dark:bg-jacarta-700">
              <option class="p-2" :value="item" :selected="item.name===settingForm.btc.selectValue.name"
                      v-for="item in settingForm.btc.selectData">{{ item.name }}
              </option>
            </select>
          </div>
        </div>
        <div class="sm:col-span-2 lg:col-span-1">
          <label for="message" class="block text-sm font-semibold leading-6 text-gray-900">自定义货币模式</label>
          <div class="mt-2.5">
            <input type="text" v-model="settingForm.btc.selectValue.value" class=" px-10 py-1 rounded-md border-accent dark:bg-jacarta-700">
          </div>
        </div>
      </div>
    </div>
    <div class=" md:mt-4 lg:mt-20  max-w-2xl">
      <h2 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-xl">轮播配置123</h2>
    </div>
    <div class=" mt-2 min-w-2xl max-w-4xl sm:mt-2 space-y-4">
      <div class="grid mt-4 -mb-4 text-sm gap-x-8 sm:grid-cols-7">
        <div class="col-span-1"></div>
        <div class="col-span-3 text-center">权重</div>
        <div class="col-span-3 text-center">停留时间（秒）</div>
      </div>
      <div class="grid gap-y-1 gap-x-8 sm:grid-cols-7" v-for="item in settingForm.carousel">
        <label for="first-name"
               class="col-span-1 block flex items-center justify-center text-sm font-semibold leading-6 text-gray-900">{{ item.name }}</label>
        <div class="col-span-3">
          <div class="mt-2.5">
            <input type="text" name="first-name" id="first-name" autocomplete="given-name"
                   placeholder="权重"
                   v-model="item.weight"
                   class="block w-full rounded-md border-0 dark:bg-jacarta-700 py-2 px-3.5 text-sm leading-6 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
          </div>
        </div>
        <div class="col-span-3">
          <div class="mt-2.5">
            <input type="text" name="last-name" id="last-name" autocomplete="family-name"
                   placeholder="停留时间"
                   v-model="item.stayTime"
                   class="block w-full rounded-md dark:bg-jacarta-700 border-0 py-2 px-3.5 text-sm leading-6 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-start space-x-4 mt-5">
      <button @click="save" class="px-4 py-1 text-white rounded-md  bg-accent">
        保存
      </button>
      <button @click="reset" class="px-4 py-1 text-white rounded-md  bg-accent">
        重置
      </button>
      <button @click="emit('exit')" class="px-4 py-1 text-white rounded-md bg-accent  ">
        退出
      </button>
    </div>
  </div>
</template>